<template>
  <div class="fwwsbcwh">
    <searchbtnzzn :componentDetail="componentDetail" />
    <div
      :class="{
        each_bt_div: true,
        each_bt_div_act: each_bt_div_act == 'nengxiao',
      }"
      :style="geteach_bt_divstyle('nengxiao')"
      @click="btnclick('qiehuan')"
    ></div>
    <settingbtnzzn
      :componentDetail="componentDetail"
      :style="{
        width: this.getscalepxc(50),
        height: this.getscalepxc(50),
      }"
    ></settingbtnzzn>
    <div
      :class="{
        each_bt_div: true,
        each_bt_div_act: each_bt_div_act == 'relizhani',
      }"
      :style="geteach_bt_divstyle('relizhani')"
      @click="btnclick('zhongdian')"
    ></div>
    <div
      :class="{
        each_bt_div: true,
        each_bt_div_act: each_bt_div_act == 'shijiao',
      }"
      :style="geteach_bt_divstyle('shijiao')"
      @click="btnclick('shijiao')"
    ></div>
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "rightbuttonzzn",
  components: {},

  mixins: [commonmixins],

  data() {
    return {
      inputval: "",
      btlist: [
        { name: "nengxiao" },
        // { name: "shezhi" },
        { name: "guanbi" },
        { name: "liuyan" },
      ],
      each_bt_div_act: "sousuo",
      each_bt_divstyle: {},
      inputdiv: {
        width: "100px",
      },
    };
  },
  computed: {},
  watch: {
    scale: {
      handler: function (n, o) {
        this.loadData();
      },
    },
  },
  mounted() {
    
  },
  methods: {
    // getimgpath(path){
    //   return
    // },
    geteach_bt_divstyle(path) {
      return {
        width: this.getscalepxc(50),
        height: this.getscalepxc(50),
        backgroundImage: `url(/configuration/2d/${path}.png)`,
      };
    },
    loadData() {
      console.log(this.scale);
    },
    getimgpath(path) {
      return `/configuration/2d/${path}.png`;
    },
    btnclick(key) {
      // console.log(key);
      // this.each_bt_div_act = key;
      // this.$store.state.daping.scencetype = type;
      // this.$message.success("三维地图场景切换成功");

      switch (key) {
        case "qiehuan":
          if (this.$store.state.daping.scencetype == "nengxiao") {
            this.$store.state.daping.scencetype = "gongre";
            this.$notify.info({
              message: "切换GIS图成功",
            });
          } else {
            this.$store.state.daping.scencetype = "nengxiao";
            this.$notify.info({
              message: "切换能效图成功",
            });
          }
          break;
        case "zhongdian":
          break;
        case "shijiao":
          this.$root._earth.camera.flyTo(
            [1.984495780635989, 0.6006384677090282, 25378.505557256653],
            0,
            [3.552713678800501e-15, -0.6166629070680854, 6.283185307179586]
          );
          this.$notify.info({
            message: "恢复到默认视角",
          });
          break;

        default:
          break;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.each_bt_div {
  // background-image: url("/configuration/2d/lbtnn.png");
  // width: 30px;
  // height: 30px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  color: #ffffff;
  &:hover {
    color: red;
  }
}
.each_bt_div_act {
  padding: 5px;
  // background-image: url("/configuration/2d/lbtna.png");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  color: #ffffff;
  &:hover {
    color: red;
  }
}
</style>